<template>
	<view>
		<view class="list bgfff f26">
			<view class="item flex-ac-jb" @tap="changeImg">
				<text>个人头像</text>
				<view class="right">
					<view class="headImg">
					    <gui-imageLoading width="88" height="88" borderRadius="50%" :src="vuex_userInfo.headPortrait" mode="aspectFill" :showOpacity="true"></gui-imageLoading>
					</view>
					<!-- <image class="headImg" :src="vuex_userInfo.headPortrait" mode="aspectFill"></image> -->
				</view>
			</view>
			<view class="item flex-ac-jb" @tap="$u.to('changeName?data='+vuex_userInfo.username+'&type=1')">
				<text>用户名称</text>
				<view class="right">
					<text>{{vuex_userInfo.username}}</text>
					<text class="gui-icons">&#xe601;</text>
				</view>
			</view>
			<view class="item flex-ac-jb" @tap="$u.to('changeSex?sex='+vuex_userInfo.gender)">
				<text>性别</text>
				<view class="right">
					<text v-if="vuex_userInfo&&sexList[vuex_userInfo.gender]">{{sexList[vuex_userInfo.gender].name}}</text>
					<text v-else>保密</text>
					<text class="gui-icons">&#xe601;</text>
				</view>
			</view>
			<view class="item flex-ac-jb">
				<text>ID</text>
				<view class="right">
					<text>{{vuex_userInfo.id}}</text>
					<!-- <text class="gui-icons">&#xe601;</text> -->
				</view>
			</view>
			<view class="item flex-ac-jb" @tap="$u.to('/pages/user/bindPhone?phone='+vuex_userInfo.phone)">
				<text>手机号绑定</text>
				<view class="right">
					<text>{{$u.hidePhone(vuex_userInfo.phone,3,4)}}</text>
					<text class="gui-icons">&#xe601;</text>
				</view>
			</view>
		</view>
		<view class="list bgfff">
			<view class="item flex-ac-jb" @tap="$u.to('aboutUs')">
				<text>关于我们</text>
				<view class="right">
					<text class="gui-icons">&#xe601;</text>
				</view>
			</view>
			<view class="item flex-ac-jb" @tap="$u.to('stateMent?type=2')">
				<text>服务协议</text>
				<view class="right">
					<text class="gui-icons">&#xe601;</text>
				</view>
			</view>
			<view class="item flex-ac-jb" @tap="$u.to('stateMent?type=3')">
				<text>隐私政策</text>
				<view class="right">
					<text class="gui-icons">&#xe601;</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				sexList: [{
					value: 0,
					name: '男'
				}, {
					value: 1,
					name: '女'
				}, {
					value: 2,
					name: '保密'
				}],
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			changeImg(){
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.$u.to('changeHead?headImg=' + res.tempFilePaths[0])
					}
				});
			}
		}
	}
</script>

<style lang="less">
.list{
	margin-top: 12rpx;
	padding:  0 50rpx 0 50rpx;
	.item{
		padding: 24rpx 0;
		.right{
			.headImg{
				width: 88rpx;
				height: 88rpx;
				border: 4rpx solid #FFFFFF;
				border-radius: 50%;
			}
		}
	}
}
</style>
